<template>
  <view>
    <view style="background-image: url(../../static/nav/me_bg.jpg);">
      <uni-row>
        <uni-col :span="1">&nbsp;</uni-col>
        <uni-col :span="22">
          <view>
            <uni-card :is-shadow="true">
              <view style="height: 80px;">
                <uni-row>
                  <uni-col :span="19">
                    <view class="nickname-class">
                      <text>微信昵称</text>
                    </view>
                    <view class="info-class">
                      <text>个人信息</text>
                    </view>
                  </uni-col>
                  <uni-col :span="5" >
                    <view class="logo-outer-class" style="height: 80px;">
                      <view class="logo-class">
                        <view>
                          <text>多福</text>
                        </view>
                      </view>
                    </view>
                  </uni-col>
                </uni-row>
              </view>
            </uni-card>
          </view>
        </uni-col>
        <uni-col :span="1">&nbsp;</uni-col>
      </uni-row>
    </view>
    <uni-row>
      <uni-col :span="1">&nbsp;</uni-col>
      <uni-col :span="22">
        <view>
          <uni-card :is-shadow="true">
            <uni-list :border="false">
              <uni-list-item clickable  showArrow>
                <template v-slot:body>
                  <view class="item-class">
                    <uv-icon name="coupon" size="25"></uv-icon>
                    <view class="item-font-class">
                      <text class="text">我的优惠券</text>
                    </view>
                  </view>
                </template>
              </uni-list-item>
              <uni-list-item clickable  showArrow>
                <template v-slot:body>
                  <view class="item-class">
                    <uv-icon name="gift" size="25"></uv-icon>
                    <view class="item-font-class">
                      <text class="text">领券中心</text>
                    </view>
                  </view>
                </template>
              </uni-list-item>
              <uni-list-item clickable  showArrow>
                <template v-slot:body>
                  <view class="item-class">
                    <uv-icon name="account" size="25"></uv-icon>
                    <view class="item-font-class">
                      <text class="text">我的会员卡</text>
                    </view>
                  </view>
                </template>
              </uni-list-item>
              <uni-list-item clickable  showArrow>
                <template v-slot:body>
                  <view class="item-class">
                    <uv-icon name="car" size="25"></uv-icon>
                    <view class="item-font-class">
                      <text class="text">我的收货地址</text>
                    </view>
                  </view>
                </template>
              </uni-list-item>
            </uni-list>
          </uni-card>
        </view>
      </uni-col>
      <uni-col :span="1">&nbsp;</uni-col>
    </uni-row>
  </view>
</template>



<script setup lang="ts">
import { ref } from 'vue'

</script>


<style lang="scss">
</style>

<style lang="scss" scoped>
.item-class {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 28rpx;
  .item-font-class  {
    margin-left: 5px;
  }
}

.nickname-class {
  margin-top: 10px;
  font-size: 38rpx;
  color: black;
  font-weight: bolder;
}

.info-class {
  margin-top: 15px;
  font-size: 20rpx;
  color: #AAAAAA;
}

.logo-outer-class {
  display: flex;
  flex-direction: column;
  justify-content: center;

  .logo-class {
    height: 70px;
    width: 70px;
    background-color: #FBBD08;
    border-radius: 50%;
    font-size: 28rpx;
    text-align: center;
    display: flex;
    color: #FFFFFF;
    flex-direction: column;
    justify-content: center;
  }
}

</style>